<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lzy">
    <title>lzy-</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        body{
            margin: 0;
            height: 2000px;
            background-color: lightblue;
        }
        div{
            position: absolute;
        }
        span{
            display: inline-block;
        }
        div{
            /*width: 100px;*/
            height: 40px;
            line-height: 40px;
            cursor: pointer;
        }
        #top{
            background-color: rebeccapurple;
        }
        #top .top{
            width: 70px;
            display: none;
        }
        #top .topBtn{
            width: 20px;
        }
        #bottom{
            background-color: gray;           
        }
        #bottom .bottom{
            width: 70px;
            display: none;
        }
        #bottom .bottomBtn{
            width: 20px;
        }
    </style>
</head>
<body>
    <div id="top">
        <span class="top">返回顶部</span>
        <span class="topBtn">▲</span>
    </div>
    <div id="bottom">
        <span class="bottom">转到底部</span>
        <span class="bottomBtn">▼</span>
    </div>
</body>
</html>
<script>


// 弹窗居中
// left = 页面宽 - 弹窗宽/2 + 滚动条的left
// top = 页面高 - 弹窗高/2 + 滚动条的top
    ab();
    function ab(){ 
        var winh=$(window).height();
        var scrh=$(window).scrollTop();
        $('#top').css({
            right:0,
            top:(winh - 20)/2 +scrh,
        })
        $('#bottom').css({
            right:0,
            top:(winh - 20)/2 +scrh +40,
        })
    }
    $('div').each(function(){
        $(this).hover(function(){
            $(this).find('span').first().show();
            $(this).css({
                'border-top-left-radius': 10 +'px',
                'border-bottom-left-radius': 10+'px',
            })
        },function(){
           $(this).find('span').first().hide();
            $(this).css({
                'border-top-left-radius': 0 +'px',
                'border-bottom-left-radius': 0+'px',
            })
        })
    })  

    $(window).scroll(function(){
        ab();
    });

    var winh=$(window).height();
    console.log(winh);
    var scrh=$(window).scrollTop();
    console.log(scrh);
    var heig=$('body').height();
    console.log(heig);

$('#top').click(function(){$('html,body').animate({scrollTop: '0px'}, 100);});
$('#bottom').click(function(){
    $('html,body').animate({
        scrollTop: (heig - winh)+'px'
    },100)
})

</script>
